<template>
<view class="page"> 
	<template v-if="isLogin">
		<!-- 成员列表 -->
		<template v-if="type==1"> 
			<view class="body">
				<view class="list-wrap">
					
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					
					<template v-else>
						<template v-if="list.length>0"> 			 
							<view class="item" v-for="(item,index) in list" :key="index">
								<view class="icon">{{item.label_name}}</view>
								<view class="info">
									<view class="name">{{item.realname}}</view>
									<view class="params"> 
										<view class="text">{{item.replace_phone}}</view> 
									</view>
								</view>
							</view>
							
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
						
					</template>
					 
					
				</view>
			</view>   
		</template>
		
		<!-- 添加成员 -->
		<template v-if="type==2">
			
			<view class="body">
				<view class="form-wrap m-b2">
					<view class="form-item">
						<view class="label">手 机：</view>
						<view class="form-input">
							<view class="content">
								<input type="number" class="inp" v-model="params.phone" placeholder="输入手机号" />
							</view>
						</view>
					</view>
			
					<view class="form-item">
						<view class="label">姓 名：</view>
						<view class="form-input">
							<view class="content">
								<input type="text" class="inp" v-model="params.name" placeholder="输入姓名" />
							</view>
						</view>
					</view>
					
					<view class="form-item">
						<view class="label">密 码：</view>
						<view class="form-input">
							<view class="content">
								<input type="password" class="inp" v-model="params.password" placeholder="请输入密码"/> 
							</view>
						</view>
					</view> 
					
					<view class="form-item">
						<view class="label">确认密码：</view>
						<view class="form-input">
							<view class="content">
								<input type="password" class="inp" v-model="params.password_reset" placeholder="请再次确认密码"/> 
							</view>
						</view>
					</view> 
			
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="form-lay-btn" @click="addMember">确定添加</view>
				</view>
			</view>
			 
		</template>
	</template>
	
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {replaceStr,checkPhone} from '@/common/util.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				compelted:false
			},
			userInfo:uni.getStorageSync('userInfo'),
			type:1,
			page:1,
			list:[],
			total:0,
			isStop:true,
			params:{
				name:'',
				phone:'',
				password:'',
				password_reset:'' 
			},
			area:{
				provinces:[],
				citys:[],
				districts:[]
			},
			flag:{
				isFullPage:false,
				isShowArea:false
			}
			
		}
	},
	onShow() {
		
	},
	async onLoad(params) { 
		this.type=params.type;
		this.isLogin = await this.$loginState('check');
		if(this.type==1){
			uni.setNavigationBarTitle({
				title:"我的成员"
			})
		}else if(this.type==2){
			uni.setNavigationBarTitle({
				title:"添加成员"
			})
		}
		if (this.isLogin) { 
			if(this.type==1){
				this.getMyMemberList();	
			}else if(this.type==2){
				 
			}
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				if(this.type==1){
					this.getMyMemberList();					
				} 
			} 
		}	 
	},
	methods:{
		
		// 获取我的成员列表
		getMyMemberList:async function(){
			let res=await this.$api.user_api.getMyMemberList(); 
			if(res.data.ret==0){
				this.loadingState.default=false; 
				this.loadingState.completed=true;
				res.data.data.forEach(item=>{
					item.label_name = item.realname.substring(item.realname.length - 2, item.realname.length);
					item.replace_phone=replaceStr(item.username,3,'****');
				}) 
				this.list=this.list.concat(res.data.data); 
			}else{
				this.loadingState.default=false; 
			}
		},
		 
		// 添加成员
		addMember:async function(){
			let _this=this;
			if(this.params.phone==''){
				uni.showToast({
					icon: 'none', 
					title: '请输入手机号',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.phone==''||!checkPhone(this.params.phone)){
				uni.showToast({
					icon: 'none', 
					title: '联系手机为空或格式错误',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.name==''){
				uni.showToast({
					icon: 'none', 
					title: '请输入成员姓名',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.password==''){
				uni.showToast({
					icon: 'none', 
					title: '请输入登录密码',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.password_reset==''){
				uni.showToast({
					icon: 'none', 
					title: '请再次输入登录密码',
					mask: true,
					duration: 2000
				})
				return
			}else if(this.params.password!=this.params.password_reset){
				uni.showToast({
					icon: 'none', 
					title: '两次密码不一致',
					mask: true,
					duration: 2000
				})
				return
			}
			
			uni.showLoading({
				title:"数据提交中"
			})
			
			if(this.isStop){
				this.isStop=false;
				let res=await this.$api.pro_api.addMyMember({
					username: this.params.phone,
					password: this.params.password,
					realname: this.params.name,
					phone:this.params.phone,
					cid: this.userInfo.id,
					user_type_id: 3
				})   
				if(res.data.ret==0){
					uni.hideLoading(); 
					uni.showToast({
						icon: 'success', 
						title: '添加成功',
						mask: true,
						duration: 2000,
						success() {
							setTimeout(()=>{								
								uni.navigateBack({
									delta:1
								})
								_this.isStop=true; 
							},2000)
						}
					})
				}else if(res.data.ret==-2){
					uni.hideLoading(); 
					setTimeout(()=>{
						_this.isStop=true; 
					},2000)
					uni.showModal({
						content:'开通专业项目账号，请联系系统管理员',
						confirmText:'立即联系',
						success(m_res) {
							if(m_res.confirm){								
								uni.makePhoneCall({
									phoneNumber: '13560111110'
								});
							}
						}
					})
				}else{
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						image:'../../static/image/error.png',
						title: res.data.message,
						mask: true,
						duration: 2000,
						success() {
							setTimeout(()=>{
								_this.isStop=true; 
							},2000)
						}
					})
				}
				
			}
			
		}
	},
	computed:{
		company_list_update(){
			return this.$store.state.companyListUpdate;
		}
	},
	watch:{
		company_list_update(newer,older){
			if(newer!=older){
				this.list=[];
				this.page=1;
				this.loadingState.default=true;
				this.loadingState.loading=false;
				this.loadingState.completed=false;
				this.getMembers();
			}
		}
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{
		padding-top:20rpx;
		.item{ 
			display: flex;
			padding:20rpx 30rpx;
			margin-bottom: 20rpx;
			background:#fff;
			.icon{
				width:100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #FF5754; 
				border-radius: 50%;
				font-size: 40rpx;
				text-align: center;
				line-height: 100rpx;
				color:#fff;
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	/deep/ .indicatorClass{
		height: 50px;	
		line-height: 50px;
	}
	
	.add-yj-btn{ 
		width: 96%;
		height:80rpx;
		margin:10rpx auto;
		background: #f00;
		border-radius: 10rpx;
		text-align: center;
		line-height:80rpx;
		color:#fff;
		font-size:32rpx;
	}
</style>
